<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 定义主题 */
        [theme="theme1"] {
          --primary-color: lightblue;
          --primary-font-size: 20px;
        }
        [theme="theme2"] {
          --primary-color: lightcoral;
          --primary-font-size: 30px;
        }
        .theme > span {
          color: var(--primary-color);
          font-size: var(--primary-font-size);
        }
      </style>  
    <style>
        :root {
            --content_body_width_size: 20rem;
            --body_item_num: 4;
        }
        .content {
            background-color: #f0f8ff;
            padding: 5rem 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .content-body {
            border-style: dotted;
            border-color: blueviolet;
            display: flex;
            flex-wrap: wrap;
            width: var(--content_body_width_size);
        }
        .content-body-num {
            margin: 5px;
            width: calc(var(--content_body_width_size) / var(--body_item_num) - 5px * 2);
            height: calc(var(--content_body_width_size) / var(--body_item_num) - 5px * 2);
            background-color: bisque;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="content-body" id="content-body"></div>
    </div>
</body>
<script>
    const content_body = document.getElementById("content-body");
    for (let index = 1; index < 9; index++) {
        let element = `<div class="content-body-num"><span>${index}</span></div>`;
        content_body.innerHTML += element;
    }
</script>
</html>